<!DOCTYPE html>
<html lang="zh-CN">
<!-- Move script.js include to head section -->
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=0.5">-->
    <meta name="viewport" content="width=device-width, initial-scale=0.45, shrink-to-fit=no">
    <title>会计个人信息登记</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- Add script.js reference here -->
    <script src="/js/script.js"></script>
</head>
<body>
    <header class="header">
        <h1>上海莱升信息科技有限公司面试系统</h1>
        <p class="header-description">欢迎使用面试系统，请填写以下信息完成面试申请</p>
    </header>
    <main class="main-content">
        <h2 class="page-title">面试登记表</h2>
        
        <!-- 简历上传区域 -->
        <div class="form-card" style="margin-bottom: 20px;">
            <div class="form-section">
                <h3>简历上传</h3>
                <div class="resume-upload" id="resumeUpload">
                    <p>📄 上传PDF格式简历文件</p>
                    <input type="file" id="resumeFile" accept=".pdf" style="display: none;">
                    <button type="button" class="upload-btn" onclick="document.getElementById('resumeFile').click()">
                        选择PDF文件
                    </button>
                    <p class="upload-info">支持PDF格式，最大10MB</p>
                </div>
            </div>
        </div>
        
        <div class="form-card">
            <form id="accountingForm" class="info-form" action="/accountInfo">
                <div class="form-section">
                    <h3>基本情况</h3>
                    <!-- 基本情况表格 -->
                    <div class="table-container">
                        <table class="form-table">
                            <tr>
                                <td class="form-label">填表日期:</td>
                                <td colspan="3">
                                    <input type="date" name="formDate" required>
                                </td>
                            </tr>
                            <tr>
                                <td class="form-label">中文姓名:</td>
                                <td><input type="text" name="name" required></td>
                                <td class="form-label">性别:</td>
                                <td>
                                    <select name="gender" required>
                                        <option value="">请选择</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="form-label">出生年月:</td>
                                <td><input type="date" name="birthDate" required></td>
                                <td class="form-label">申请职位:</td>
                                <td><input type="text" name="position" value=""></td>
                            </tr>
                            <tr>
                                <td class="form-label">学历:</td>
                                <td>
                                    <select name="education" required>
                                        <option value="">请选择</option>
                                        <option value="专科">专科</option>
                                        <option value="本科">本科</option>
                                        <option value="硕士">硕士</option>
                                        <option value="博士">博士</option>
                                    </select>
                                </td>
                                <td class="form-label">专业:</td>
                                <td><input type="text" name="major" required></td>
                            </tr>
                            <tr>
                                <td class="form-label">婚姻状况:</td>
                                <td>
                                    <select name="maritalStatus" required>
                                        <option value="">请选择</option>
                                        <option value="未婚">未婚</option>
                                        <option value="已婚">已婚</option>
                                        <option value="离异">离异</option>
                                    </select>
                                </td>
                                <td class="form-label">期望薪金:</td>
                                <td><input type="text" name="expectedSalary" required placeholder="如: 10000-15000"></td>
                            </tr>
                            <tr>
                                <td class="form-label">身高:</td>
                                <td><input type="text" name="height" placeholder="cm"></td>
                                <td class="form-label">籍贯:</td>
                                <td><input type="text" name="nationality" required class="required"></td>
                            </tr>
                            <tr>
<!--                                <td class="form-label">籍贯:</td>-->
<!--                                <td><input type="text" name="nativePlace" required class="required"></td>-->
<!--                                <td class="form-label">身份证号码:</td>-->
<!--                                <td><input type="text" name="idNumber" required></td>-->
<!--                            </tr>-->
                                <td class="form-label">民族:</td>
                                <td><input type="text" name="nationality" required class="required"></td>
                            </tr>
                                <td class="form-label">身份证号码:</td>
                                <td colspan="3"><input type="text" name="idNumber" ></td>
                            </tr>
                            <tr>
                                <td class="form-label">户口地址:</td>
                                <td colspan="3"><input type="text" name="householdAddress" required></td>
                            </tr>
                            <tr>
                                <td class="form-label">现住地址:</td>
                                <td colspan="3"><input type="text" name="currentAddress" required></td>
                            </tr>
                            <tr>
                                <td class="form-label">联系电话:</td>
                                <td><input type="tel" name="phone" required></td>
                                <td class="form-label">电子邮箱:</td>
                                <td><input type="email" name="email" required></td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="form-section">
                    <h3>工作经历</h3>
                    <!-- 工作经历表格 -->
                    <div class="table-container">
                        <table class="form-table experience-table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>单位名称</th>
                                    <th>职位</th>
                                    <th>离职原因</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="experience-row">
                                    <td><input type="text" name="workTime1" placeholder="如: 2020.01-2023.05"></td>
                                    <td><input type="text" name="company1"></td>
                                    <td><input type="text" name="position1"></td>
                                    <td><input type="text" name="reason1"></td>
                                </tr>
                                <tr class="experience-row">
                                    <td><input type="text" name="workTime2" placeholder="如: 2020.01-2023.05"></td>
                                    <td><input type="text" name="company2"></td>
                                    <td><input type="text" name="position2"></td>
                                    <td><input type="text" name="reason2"></td>
                                </tr>
                                <tr class="experience-row">
                                    <td><input type="text" name="workTime3" placeholder="如: 2020.01-2023.05"></td>
                                    <td><input type="text" name="company3"></td>
                                    <td><input type="text" name="position3"></td>
                                    <td><input type="text" name="reason3"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="form-section">
                    <h3>学习/培训经历</h3>
                    <table class="form-table education-table">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>学校/机构</th>
                                <th>证书</th>
                                <th>所学专业/学习内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="education-row">
                                <td><input type="text" name="eduTime1" placeholder="如: 2016.09-2020.06"></td>
                                <td><input type="text" name="school1"></td>
                                <td><input type="text" name="certificate1"></td>
                                <td><input type="text" name="major1"></td>
                            </tr>
                            <tr class="education-row">
                                <td><input type="text" name="eduTime2" placeholder="如: 2016.09-2020.06"></td>
                                <td><input type="text" name="school2"></td>
                                <td><input type="text" name="certificate2"></td>
                                <td><input type="text" name="major2"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="form-section">
                    <h3>技能</h3>
                    <table class="form-table skills-table">
                        <tr>
                            <td class="form-label">外语:</td>
                            <td><input type="text" name="foreignLanguage"></td>
                            <td class="form-label">掌握程度/证书:</td>
                            <td><input type="text" name="foreignLanguageCert"></td>
                        </tr>
                        <tr>
                            <td class="form-label">计算机:</td>
                            <td><input type="text" name="computerSkills"></td>
                            <td class="form-label">掌握程度/证书:</td>
                            <td><input type="text" name="computerCert"></td>
                        </tr>
                        <tr>
                            <td class="form-label">会计:</td>
                            <td><input type="text" name="accountingSkills"></td>
                            <td class="form-label">掌握程度/证书:</td>
                            <td><input type="text" name="accountingCert"></td>
                        </tr>
                        <tr>
                            <td class="form-label">其他:</td>
                            <td><input type="text" name="otherSkills"></td>
                            <td class="form-label">掌握程度/证书:</td>
                            <td><input type="text" name="otherCert"></td>
                        </tr>
                    </table>
                </div>

                <div class="form-section">
                    <h3>自我评价</h3>
                    <table class="form-table">
                        <tr>
                            <td class="form-label">性格特点:</td>
                            <td colspan="3"><textarea name="personality" rows="2"></textarea></td>
                        </tr>
                        <tr>
                            <td class="form-label">爱好/特长:</td>
                            <td colspan="3"><textarea name="hobbies" rows="2"></textarea></td>
                        </tr>
                    </table>
                </div>

                <div class="form-section">
                    <h3>是否能接受:</h3>
                    <div class="acceptance-options">
                        <label class="checkbox-label"><input type="checkbox" name="overtime" value="true" class="acceptance-option"> 加班</label>
                        <label class="checkbox-label"><input type="checkbox" name="businessTrip" value="true" class="acceptance-option"> 出差</label>
                        <label class="checkbox-label"><input type="checkbox" name="relocate" value="true" class="acceptance-option"> 外派到别的城市工作</label>
                        <input type="hidden" name="acceptanceValidation" class="required"/>
                    </div>
                </div>

                <div class="form-section">
                    <h3>其它</h3>
                    <table class="form-table">
                        <tr>
                            <td class="form-label">对未来工作的期望:</td>
                            <td colspan="3"><textarea name="jobExpectations" rows="2"></textarea></td>
                        </tr>
                        <tr>
                            <td class="form-label">对未来工作公司的期望:</td>
                            <td colspan="3"><textarea name="companyExpectations" rows="2"></textarea></td>
                        </tr>
                        <tr>
                            <td class="form-label">到岗时间:</td>
                            <td><input type="text" name="availableDate"></td>
                            <td class="form-label">除上述应聘职位外其它可以适应的工作:</td>
                            <td><input type="text" name="otherPositions"></td>
                        </tr>
                    </table>
                </div>

                <div class="form-group submit-group">
                    <div class="button-container">
                        <button type="button" class="btn preview-btn" onclick="showPreview()">
                            <span class="btn-icon">👁️</span>
                            预览信息
                        </button>
                        <button type="submit" class="btn submit-btn">
                            <span class="btn-icon">✅</span>
                            提交申请
                        </button>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- 预览弹窗 -->
        <div id="previewModal" class="modal" style="display: none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">信息预览</h3>
                    <span class="close" onclick="closePreviewModal()">&times;</span>
                </div>
                <div class="modal-body">
                    <div id="previewContent"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-edit" onclick="closePreviewModal()">
                        <span class="btn-icon">✏️</span>
                        返回编辑
                    </button>
                    <button type="button" class="btn btn-submit" onclick="submitFromPreview()">
                        <span class="btn-icon">🚀</span>
                        确认提交
                    </button>
                </div>
            </div>
        </div>

        <!-- 提交确认弹窗 -->
        <div id="submitModal" class="modal" style="display: none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">确认提交</h3>
                    <span class="close" onclick="closeSubmitModal()">&times;</span>
                </div>
                <div class="modal-body">
                    <div id="submitPreviewContent"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-edit" onclick="closeSubmitModal()">
                        <span class="btn-icon">✏️</span>
                        返回编辑
                    </button>
                    <button type="button" class="btn btn-submit" onclick="confirmSubmit()">
                        <span class="btn-icon">✅</span>
                        确认提交
                    </button>
                </div>
            </div>
                </div>
            </form>
        </div>
    </main>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="back-to-top" onclick="scrollToTop()">
        <span>顶部</span>
    </button>

    <!-- Keep only the form submission logic in body -->
    <script>
        document.getElementById('accountingForm').addEventListener('submit', function(e) {
            e.preventDefault();
            showSubmitModal();
        });
        
        // 简历上传处理
        document.getElementById('resumeFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                uploadResume(file);
            }
        });
        
        // 上传简历
        function uploadResume(file) {
            // 这里只是简单的文件选择，实际提交时会上传
            showToast('简历文件已选择，将在提交时一起上传', 'info');
        }
        
        // 全局变量存储选择的文件
        let selectedResumeFile = null;
        
        // 修改文件选择处理
        document.getElementById('resumeFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                selectedResumeFile = file;
                uploadResume(file);
            }
        });
        
        // 显示预览弹窗
        function showPreview() {
            const form = document.getElementById('accountingForm');
            const formData = new FormData(form);
            const data = {};
            
            // 收集表单数据
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            // 处理复选框
            data.overtime = form.querySelector('input[name="overtime"]').checked ? '是' : '否';
            data.businessTrip = form.querySelector('input[name="businessTrip"]').checked ? '是' : '否';
            data.relocate = form.querySelector('input[name="relocate"]').checked ? '是' : '否';
            
            // 生成预览HTML
            const previewHTML = generatePreviewHTML(data);
            document.getElementById('previewContent').innerHTML = previewHTML;
            
            // 显示预览弹窗
            document.getElementById('previewModal').style.display = 'block';
        }
        
        // 关闭预览弹窗
        function closePreviewModal() {
            document.getElementById('previewModal').style.display = 'none';
        }
        
        // 显示提交确认弹窗
        function showSubmitModal() {
            const form = document.getElementById('accountingForm');
            const formData = new FormData(form);
            const data = {};
            
            // 收集表单数据
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            // 处理复选框
            data.overtime = form.querySelector('input[name="overtime"]').checked ? '是' : '否';
            data.businessTrip = form.querySelector('input[name="businessTrip"]').checked ? '是' : '否';
            data.relocate = form.querySelector('input[name="relocate"]').checked ? '是' : '否';
            
            // 生成预览HTML
            const previewHTML = generatePreviewHTML(data);
            document.getElementById('submitPreviewContent').innerHTML = previewHTML;
            
            // 显示提交确认弹窗
            document.getElementById('submitModal').style.display = 'block';
        }
        
        // 关闭提交确认弹窗
        function closeSubmitModal() {
            document.getElementById('submitModal').style.display = 'none';
        }
        
        // 确认提交
        function confirmSubmit() {
            closeSubmitModal();
            submitFormWithResume('accounting');
        }
        
        // 带简历提交表单
        function submitFormWithResume(type) {
            const form = document.getElementById('accountingForm');
            const formData = new FormData(form);
            const data = {};
            
            // 收集表单数据
            for (let [key, value] of formData.entries()) {
                data[key] = value;
            }
            
            // 处理复选框
            data.overtime = form.querySelector('input[name="overtime"]').checked ? '是' : '否';
            data.businessTrip = form.querySelector('input[name="businessTrip"]').checked ? '是' : '否';
            data.relocate = form.querySelector('input[name="relocate"]').checked ? '是' : '否';
            
            // 先提交表单数据
            fetch('/api/user/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    // 如果有简历文件，则上传简历
                    if (selectedResumeFile) {
                        const resumeFormData = new FormData();
                        resumeFormData.append('file', selectedResumeFile);
                        resumeFormData.append('accountingInfoId', result.accountingId);
                        
                        return fetch('/api/resume/upload', {
                            method: 'POST',
                            body: resumeFormData
                        });
                    } else {
                        // 没有简历文件，直接完成
                        showToast('提交成功！', 'success');
                        // 发送刷新通知到dashboard
                        const channel = new BroadcastChannel('dashboard-refresh');
                        channel.postMessage('refresh');
                        channel.close();
                        setTimeout(() => {
                            window.location.href = '/index.html';
                        }, 1500);
                        return Promise.resolve();
                    }
                } else {
                    throw new Error(result.message || '提交失败');
                }
            })
            .then(response => {
                if (response && response.ok) {
                    return response.json();
                }
                return null;
            })
            .then(resumeResult => {
                if (resumeResult) {
                    if (resumeResult.success) {
                        showToast('提交成功！简历已上传', 'success');
                    } else {
                        showToast('提交成功！但简历上传失败', 'warning');
                    }
                }
                setTimeout(() => {
                    // 发送刷新通知到dashboard
                    const channel = new BroadcastChannel('dashboard-refresh');
                    channel.postMessage('refresh');
                    channel.close();
                    window.location.href = '/index.html';
                }, 1500);
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('提交失败，请重试', 'error');
            });
        }
        
        // 从预览提交
        function submitFromPreview() {
            closePreviewModal();
            submitFormWithResume('accounting');
        }
        
        // 生成预览HTML
        function generatePreviewHTML(data) {
            return `
                <div class="preview-section">
                    <h4>基本信息</h4>
                    <table class="preview-table">
                        <tr><td class="label">填表日期:</td><td class="value">${data.formDate || ''}</td></tr>
                        <tr><td class="label">姓名:</td><td class="value">${data.name || ''}</td></tr>
                        <tr><td class="label">性别:</td><td class="value">${data.gender || ''}</td></tr>
                        <tr><td class="label">出生日期:</td><td class="value">${data.birthDate || ''}</td></tr>
                        <tr><td class="label">申请职位:</td><td class="value">${data.position || ''}</td></tr>
                        <tr><td class="label">学历:</td><td class="value">${data.education || ''}</td></tr>
                        <tr><td class="label">专业:</td><td class="value">${data.major || ''}</td></tr>
                        <tr><td class="label">婚姻状况:</td><td class="value">${data.maritalStatus || ''}</td></tr>
                        <tr><td class="label">期望薪金:</td><td class="value">${data.expectedSalary || ''}</td></tr>
                        <tr><td class="label">身高:</td><td class="value">${data.height || ''}</td></tr>
                        <tr><td class="label">民族:</td><td class="value">${data.nationality || ''}</td></tr>
                        <tr><td class="label">身份证号:</td><td class="value">${data.idNumber || ''}</td></tr>
                        <tr><td class="label">户口地址:</td><td class="value">${data.householdAddress || ''}</td></tr>
                        <tr><td class="label">现住地址:</td><td class="value">${data.currentAddress || ''}</td></tr>
                        <tr><td class="label">联系电话:</td><td class="value">${data.phone || ''}</td></tr>
                        <tr><td class="label">邮箱:</td><td class="value">${data.email || ''}</td></tr>
                    </table>
                </div>
                
                <div class="preview-section">
                    <h4>工作经历</h4>
                    <table class="preview-table">
                        <tr><td class="label">工作时间1:</td><td class="value">${data.workTime1 || ''}</td></tr>
                        <tr><td class="label">公司名称1:</td><td class="value">${data.company1 || ''}</td></tr>
                        <tr><td class="label">职位1:</td><td class="value">${data.position1 || ''}</td></tr>
                        <tr><td class="label">离职原因1:</td><td class="value">${data.reason1 || ''}</td></tr>
                        <tr><td class="label">工作时间2:</td><td class="value">${data.workTime2 || ''}</td></tr>
                        <tr><td class="label">公司名称2:</td><td class="value">${data.company2 || ''}</td></tr>
                        <tr><td class="label">职位2:</td><td class="value">${data.position2 || ''}</td></tr>
                        <tr><td class="label">离职原因2:</td><td class="value">${data.reason2 || ''}</td></tr>
                        <tr><td class="label">工作时间3:</td><td class="value">${data.workTime3 || ''}</td></tr>
                        <tr><td class="label">公司名称3:</td><td class="value">${data.company3 || ''}</td></tr>
                        <tr><td class="label">职位3:</td><td class="value">${data.position3 || ''}</td></tr>
                        <tr><td class="label">离职原因3:</td><td class="value">${data.reason3 || ''}</td></tr>
                    </table>
                </div>
                
                <div class="preview-section">
                    <h4>教育经历</h4>
                    <table class="preview-table">
                        <tr><td class="label">学习时间1:</td><td class="value">${data.eduTime1 || ''}</td></tr>
                        <tr><td class="label">学校名称1:</td><td class="value">${data.school1 || ''}</td></tr>
                        <tr><td class="label">学历证书1:</td><td class="value">${data.certificate1 || ''}</td></tr>
                        <tr><td class="label">专业1:</td><td class="value">${data.major1 || ''}</td></tr>
                        <tr><td class="label">学习时间2:</td><td class="value">${data.eduTime2 || ''}</td></tr>
                        <tr><td class="label">学校名称2:</td><td class="value">${data.school2 || ''}</td></tr>
                        <tr><td class="label">学历证书2:</td><td class="value">${data.certificate2 || ''}</td></tr>
                        <tr><td class="label">专业2:</td><td class="value">${data.major2 || ''}</td></tr>
                    </table>
                </div>
                
                <div class="preview-section">
                    <h4>技能证书</h4>
                    <table class="preview-table">
                        <tr><td class="label">外语能力:</td><td class="value">${data.foreignLanguage || ''}</td></tr>
                        <tr><td class="label">外语证书:</td><td class="value">${data.foreignLanguageCert || ''}</td></tr>
                        <tr><td class="label">计算机技能:</td><td class="value">${data.computerSkills || ''}</td></tr>
                        <tr><td class="label">计算机证书:</td><td class="value">${data.computerCert || ''}</td></tr>
                        <tr><td class="label">会计技能:</td><td class="value">${data.accountingSkills || ''}</td></tr>
                        <tr><td class="label">会计证书:</td><td class="value">${data.accountingCert || ''}</td></tr>
                        <tr><td class="label">其他技能:</td><td class="value">${data.otherSkills || ''}</td></tr>
                        <tr><td class="label">其他证书:</td><td class="value">${data.otherCert || ''}</td></tr>
                    </table>
                </div>
                
                <div class="preview-section">
                    <h4>其他信息</h4>
                    <table class="preview-table">
                        <tr><td class="label">性格特点:</td><td class="value">${data.personality || ''}</td></tr>
                        <tr><td class="label">兴趣爱好:</td><td class="value">${data.hobbies || ''}</td></tr>
                        <tr><td class="label">是否接受加班:</td><td class="value">${data.overtime || ''}</td></tr>
                        <tr><td class="label">是否接受出差:</td><td class="value">${data.businessTrip || ''}</td></tr>
                        <tr><td class="label">是否接受调动:</td><td class="value">${data.relocate || ''}</td></tr>
                        <tr><td class="label">可到岗时间:</td><td class="value">${data.availableDate || ''}</td></tr>
                        <tr><td class="label">求职期望:</td><td class="value">${data.jobExpectations || ''}</td></tr>
                        <tr><td class="label">公司期望:</td><td class="value">${data.companyExpectations || ''}</td></tr>
                        <tr><td class="label">其他职位:</td><td class="value">${data.otherPositions || ''}</td></tr>
                    </table>
                </div>
            `;
        }

        // 显示提示消息
        function showToast(message, type = 'info') {
            // 创建提示元素
            const toast = document.createElement('div');
            toast.className = `toast toast-${type}`;
            toast.textContent = message;
            
            // 添加到页面
            document.body.appendChild(toast);
            
            // 显示动画
            setTimeout(() => {
                toast.classList.add('show');
            }, 100);
            
            // 3秒后自动移除
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => {
                    if (document.body.contains(toast)) {
                        document.body.removeChild(toast);
                    }
                }, 300);
            }, 3000);
        }

        // 回到顶部功能
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // 显示/隐藏回到顶部按钮
        function toggleBackToTop() {
            const backToTopBtn = document.getElementById('backToTop');
            if (window.pageYOffset > 300) {
                backToTopBtn.style.display = 'block';
            } else {
                backToTopBtn.style.display = 'none';
            }
        }

        // 模态框关闭事件
        document.addEventListener('DOMContentLoaded', function() {
            const previewModal = document.getElementById('previewModal');
            const submitModal = document.getElementById('submitModal');
            
            // 关闭预览弹窗
            window.onclick = function(event) {
                if (event.target === previewModal) {
                    previewModal.style.display = 'none';
                }
                if (event.target === submitModal) {
                    submitModal.style.display = 'none';
                }
            }

            // 监听滚动事件
            window.addEventListener('scroll', toggleBackToTop);
        });
    </script>
</body>
</html>